<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>

	<style>


	body{ background:url(__PUBLIC__/clock/bg.png);}
#c1{ 
	 background:url(__PUBLIC__/clock/bg.png);
}
	 /*margin-top: 100px;*/

*{ padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
.date { width: 520px; height: 100px;  margin: 50px auto 0; position: relative;}
.date h2 { text-align: center; padding: 80px 0 30px; }
.year { text-align: center; padding-top: 30px; }
.time { text-align: center; padding: 30px 0; }
.date img { position: relative; }
.pos2 { margin-left: 10px; }
.num { width: 25px; }
.num2 { width: 38px; }

		*{
			padding: 0;
			margin: 0;
		}

		.weather{
			background-color: #245583;
			width: 560px;
			font-size: 13px;
			line-height: 1.54;
			height: 404px;
		}


		.top{
			position: absolute;
			text-decoration: none;
			color: #fff;
			border: none;
			z-index: 20;
			outline: none;
		}

		.top ul li {

			list-style: none;
			border-left:  1px solid #fff;
			width: 88px;
			height: 250px;

			float: left;


		}


		#today{

			width: 185px;
		}


		#today img{
			
			width: 100px;
			height: 100px;
			margin: 0 0 0 43px;
		}


		.tmp {

		    padding-left: 14px;
		    font-size: 32px;
		    font-family: Arial;
		    margin-top: 5px;

		}

		p{
		text-align: center;
		font-size: 12px;
		text-shadow: 1px 1px 1px #555;
		line-height: 1em;
		margin-top: 8px;
		}

		li:hover {
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15));
    background-image: -o-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15));
    background-image: -ms-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15));
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#04FFFFFF,EndColorStr=#40FFFFFF);
}


	em {
    display: inline-block;
    margin-left: 5px;
    width: 82px;
    line-height: 18px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
	}
	a em {
	    text-decoration: underline;
	}


.detail{

	color: #fff;
}


	</style>
</head>
<body>
	<img src="{:U('Index/qrcode')}" style="float:right" >
	<div class="weather">

		<div class="top">
			<div><h2>{$weather->basic->city}</h2></div>
			<ul>
				<li id="today">
					<img src="__PUBLIC__/HeWeather5/<?php echo $now->cond->code.'.png'; ?>" alt="">
					<p class="tmp">{$tmp->max}-{$tmp->min}<sup>℃</sup></p>
					<p>{$now->cond->txt}</p>
					<p>{$now->wind->dir}</p>
					<p>风力：{$now->wind->sc} 风速：{$now->wind->spd}</p>
					<p>实时空气质量：<em style="background: #ff9900;"><b>{$aqi->city->aqi}</b> {$aqi->city->qlty}</em></p>
				</li>
				
				<li>
					 <p>{:get_week($daily_forecast[1]->date)}</p>
					 <p>{$daily_forecast[1]->date}</p>
					 <p><img src="__PUBLIC__/HeWeather5/<?php echo $daily_forecast[1]->cond->code_d.'.png';?>" alt=""></p>
					 <p>{$daily_forecast[1]->tmp->max}~{$daily_forecast[1]->tmp->min}</p>
					 <p>
					 	<?php $a=$daily_forecast[1]->cond->txt_d;
					 			$b=$daily_forecast[1]->cond->txt_n;
					 	?>
					 	<if condition = '$a eq $b ' >
					 {$daily_forecast[1]->cond->txt_d}
					 		<elseif condition = '$a neq $b' />
					 		{$daily_forecast[1]->cond->txt_d}转{$daily_forecast[1]->cond->txt_n}
					 	</if>
					 </p>
					 <p>{$daily_forecast[1]->wind->dir}{$daily_forecast[1]->wind->sc}</p>
				</li>

				<li>
					 <p>{:get_week($daily_forecast[2]->date)}</p>
					 <p>{$daily_forecast[2]->date}</p>
					 <p><img src="__PUBLIC__/HeWeather5/<?php echo $daily_forecast[2]->cond->code_d.'.png';?>" alt=""></p>
					 <p>{$daily_forecast[2]->tmp->max}~{$daily_forecast[2]->tmp->min}</p>
					 <p>
					 	<?php $a=$daily_forecast[2]->cond->txt_d;
					 			$b=$daily_forecast[2]->cond->txt_n;
					 	?>
					 	<if condition = '$a eq $b ' >
					 {$daily_forecast[1]->cond->txt_d}
					 		<elseif condition = '$a neq $b' />
					 		{$daily_forecast[2]->cond->txt_d}转{$daily_forecast[2]->cond->txt_n}
					 	</if>
					 </p>
					 <p>{$daily_forecast[2]->wind->dir}{$daily_forecast[2]->wind->sc}</p>
				</li>



				<li>
					 <p>{:get_week($daily_forecast[3]->date)}</p>
					 <p>{$daily_forecast[3]->date}</p>
					 <p><img src="__PUBLIC__/HeWeather5/<?php echo $daily_forecast[3]->cond->code_d.'.png';?>" alt=""></p>
					 <p>{$daily_forecast[3]->tmp->max}~{$daily_forecast[3]->tmp->min}</p>
					 <p>
					 	<?php $a=$daily_forecast[3]->cond->txt_d;
					 			$b=$daily_forecast[3]->cond->txt_n;
					 	?>
					 	<if condition = '$a eq $b ' >
					 {$daily_forecast[1]->cond->txt_d}
					 		<elseif condition = '$a neq $b' />
					 		{$daily_forecast[3]->cond->txt_d}转{$daily_forecast[3]->cond->txt_n}
					 	</if>
					 </p>
					 <p>{$daily_forecast[3]->wind->dir}{$daily_forecast[3]->wind->sc}</p>
				</li>

				
				<li>
					 <p>{:get_week($daily_forecast[4]->date)}</p>
					 <p>{$daily_forecast[4]->date}</p>
					 <p><img src="__PUBLIC__/HeWeather5/<?php echo $daily_forecast[4]->cond->code_d.'.png';?>" alt=""></p>
					 <p>{$daily_forecast[4]->tmp->max}~{$daily_forecast[4]->tmp->min}</p>
					 <p>
					 	<?php $a=$daily_forecast[4]->cond->txt_d;
					 			$b=$daily_forecast[4]->cond->txt_n;
					 	?>
					 	<if condition = '$a eq $b ' >
					 {$daily_forecast[1]->cond->txt_d}
					 		<elseif condition = '$a neq $b' />
					 		{$daily_forecast[4]->cond->txt_d}转{$daily_forecast[4]->cond->txt_n}
					 	</if>
					 </p>
					 <p>{$daily_forecast[4]->wind->dir}{$daily_forecast[4]->wind->sc}</p>
				</li>


				
			
				
			</ul>
		</div>
		<div class="bottom">
			
		</div>
	</div>	


	<div class="time" style="float:left">
	<canvas id="c1" width="560px" height="560px" ></canvas>
<!-- <center> -->
	<div class="detail">
		<p>阴历：{$cal->yinli}</p>
		<p>五行：{$cal->wuxing}</p>
		<p>宜：{$cal->yi}</p>
		<p>忌：{$cal->ji}</p>
	</div>
	<div id="clock" class="date">
    <div class="year">
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img src="__PUBLIC__/clock/year.png" alt="year"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img src="__PUBLIC__/clock/month.png" alt="month"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img src="__PUBLIC__/clock/seven.png" alt="seven"  />
    </div>
    <div class="time">
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img src="__PUBLIC__/clock/sign.png" alt="sign"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img src="__PUBLIC__/clock/sign.png" alt="sign"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="num" src="__PUBLIC__/clock/0.png" alt="0"  />
        <img class="pos2" src="__PUBLIC__/clock/week.png" alt="week"  />
        <img class="num2" src="__PUBLIC__/clock/one.png" alt="one"  />
    </div>

</div>

	</div>


</body>
</html>
<script>

var images = new Image;

images.src = '/Public/clock/bg2.png';

window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');

	

	var  bg  = oGC.createPattern(images,'repeat'); 



	
	function toDraw(){
		
		var x = 260;
		var y = 260;
		var r = 200;		
		
		oGC.clearRect(0,0,oC.width,oC.height);


		
		var oDate = new Date();
		var oHours = oDate.getHours();
		var oMin = oDate.getMinutes();
		var oSen = oDate.getSeconds();
		
		var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
		var oMinValue = (-90 + oMin*6) * Math.PI/180;
		var oSenValue = (-90 + oSen*6) * Math.PI/180;
		
		
		/*oGC.moveTo(x,y);
		
		oGC.arc(x,y,r,0,6*Math.PI/180,false);
		
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/
		
		oGC.beginPath();
		
		for(var i=0;i<60;i++){
			oGC.moveTo(x,y);
			oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
		}
		
		oGC.closePath();
		
		oGC.stroke();
		
		
		
		oGC.fillStyle = bg;
		
		oGC.beginPath();
		
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
		
		oGC.closePath();
		
		oGC.fill();
		
		
		oGC.lineWidth = 3;
		
		oGC.beginPath();
		
		for(var i=0;i<12;i++){
			oGC.moveTo(x,y);
			oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
		}
		
		oGC.closePath();
		
		oGC.stroke();
		
		
		// oGC.fillStyle = 'white';
		
		oGC.beginPath();
		
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
		
		oGC.closePath();
		
		oGC.fill();
		
		oGC.stokeStyle = 'white';
	
		oGC.lineWidth = 5;
		
		oGC.beginPath();
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
		
		oGC.closePath();
		oGC.stroke();
		
		oGC.lineWidth = 3;
		oGC.beginPath();
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
		
		oGC.closePath();
		oGC.stroke();
		
		
		oGC.lineWidth = 1;
		oGC.beginPath();
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);


		
		oGC.closePath();
		oGC.stroke();

		oGC.stokeStyle = 'white';
		oGC.font = '60px impact';
		oGC.textAlign  = 'center';
		oGC.textBaseline = 'top';
		oGC.strokeText('Ⅻ',x,100);
		oGC.strokeText('Ⅻ',x+x-160,y-30);
		oGC.strokeText('Ⅵ',x,(y+y)-160);
		oGC.strokeText('Ⅸ',x-160,y-30);

		
		
		
	}
	
	setInterval(toDraw,1000);
	
	toDraw();


//数字时钟

var timer=null;
                var aNow =null;
                var g_aImg=[];
                var g_oImgWeek=null;
             var g_aWeekName=
                [
                    "one",
                    "two",
                    "three",
                    "four",
                    "five",
                    "six",
                    "seven"
                ];  

                var g_iImgHeigth=0;
                var g_iTarget=0;
                var g_iMax=0;

            var oDiv=document.getElementById('clock');
            
            var aImg=oDiv.getElementsByTagName('img');
            
            var i=0;



        for(i=0;i<aImg.length;i++){

        if(!isNaN(parseInt(aImg[i].alt))){
            
            g_aImg.push(aImg[i]);

        }
    }

    g_aImg.push(aImg[aImg.length-1]);

    // console.log(g_aImg);

    aNow=getTimeArray();


    for(i=0;i<g_aImg.length;i++)
    {
        g_aImg[i].now=-1;
    }

    checkSwitch();

    setInterval(checkSwitch,1000);


        function checkSwitch(){
            var i=0;
            
            aNow=getTimeArray();
            
            g_imgHeigth=g_aImg[0].offsetHeight;
            g_iTarget=-g_imgHeigth;
            g_iMax=g_imgHeigth;
            
            timer=setInterval(doSwitch, 30);
        }


        function doSwitch()
        {
            var bEnd=false;
            var i=0;
            
            g_imgHeigth-=6;
            if(g_imgHeigth<=g_iTarget)
            {
                g_imgHeigth=g_iTarget;

                bEnd=true;
            }
            
            for(i=0;i<g_aImg.length;i++)
            {
                if(g_aImg[i].now!=aNow[i])
                {
                    if(g_imgHeigth>0)
                    {
                        g_aImg[i].style.height=g_imgHeigth+'px';
                        g_aImg[i].style.top=-(g_iMax-g_imgHeigth)/2+'px';
                    }
                    else
                    {
                        if(i==g_aImg.length-1)
                        {
                            g_aImg[i].src="/Public/clock/" + g_aWeekName[aNow[i]] + ".png";
                        }
                        else
                        {
                            g_aImg[i].src="/Public/clock/" + aNow[i] + ".png";
                        }
                        
                        g_aImg[i].style.height=-g_imgHeigth+'px';
                        g_aImg[i].style.top=-(g_iMax+g_imgHeigth)/2+'px';
                    }
                }
            }
            
    if(bEnd)
    {
        for(i=0;i<g_aImg.length;i++)
        {
            g_aImg[i].now=aNow[i];
        }
        
        clearInterval(timer);
    }
}

   
    
function toDouble(iNum)
{
    if(iNum<10)
    {
        return '0'+iNum;
    }
    else
    {
        return ''+iNum;
    }
}




    function getTimeArray(){
    var oDate=new Date();
    var aNumber=[];
    
    var iYear=oDate.getYear();
    var iMonth=oDate.getMonth();
    var iDay=oDate.getDate();
    var iHour=oDate.getHours();
    var iMin=oDate.getMinutes();
    var iSec=oDate.getSeconds();
    var iWeek=(oDate.getDay()+6)%7;
    
    if(iYear<1900){
        
        iYear+=1900;

    }
    
    var str=''+(iYear)+toDouble(iMonth+1)+toDouble(iDay)+toDouble(iHour)+toDouble(iMin)+toDouble(iSec)+iWeek;
    
    var aChar=str.split('');
    
    for(i=0;i<aChar.length;i++){
        
        aNumber[i]=parseInt(aChar[i]);

    }
    
    return aNumber;
}



    }



</script>